import { useCallback } from "react"
import { Input, Button, Select, Table } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import "./index.css"
import Footer  from "../../../commoens/footer"
const { Option } = Select;
export default function IndexPage(props: any) {
  const columns: any = [
    {
      title: 'Full Name',
      width: 100,
      dataIndex: 'name',
      key: 'name',
      fixed: 'left',
    },
    {
      title: 'Age',
      width: 100,
      dataIndex: 'age',
      key: 'age',
      fixed: 'left',
    },
    {
      title: 'Column 1',
      dataIndex: 'address',
      key: '1',
      width: 150,
    },
    {
      title: 'Column 2',
      dataIndex: 'address',
      key: '2',
      width: 150,
    },
    {
      title: 'Column 3',
      dataIndex: 'address',
      key: '3',
      width: 150,
    },
    {
      title: 'Column 4',
      dataIndex: 'address',
      key: '4',
      width: 150,
    },
    {
      title: 'Column 5',
      dataIndex: 'address',
      key: '5',
      width: 150,
    },
    {
      title: 'Column 6',
      dataIndex: 'address',
      key: '6',
      width: 150,
    },
    {
      title: 'Column 7',
      dataIndex: 'address',
      key: '7',
      width: 150,
    },
    { title: 'Column 8', dataIndex: 'address', key: '8' },
    {
      title: 'Action',
      key: 'operation',
      fixed: 'right',
      width: 100,
      render: () => <a>action</a>,
    },
  ];

  const data: any = [];
  for (let i = 0; i < 100; i++) {
    data.push({
      key: i,
      name: `Edrward ${i}`,
      age: 32,
      address: `London Park no. ${i}`,
    });
  }
  const onChange = useCallback((value) => {
    console.log(value);
  }, [])

  const onSearch = useCallback((val) => {
    console.log(val);
  }, [])
  const onChangea = useCallback((value) => {
    console.log(value);
  }, [])

  const onSearcha = useCallback((val) => {
    console.log(val);
  }, [])
  return (
    <div className="box">
      <div className="allaricle_header_container">
        <p>工作台/{props.route.name}</p>
      </div>
      <div className="allaricle_content_container">
        <div className="allaricle_content_header_container">
          <div><span>标题：</span><Input placeholder="请输入文章标题" /></div>
          <div><span>状态：</span>
            <Select
              showSearch
              optionFilterProp="children"
              onChange={onChange}
              onSearch={onSearch}
              className="allaricle_search"
            >
              <Option value="已发布">已发布</Option>
              <Option value="草稿">草稿</Option>
            </Select>
          </div>
          <div><span>分类</span>
            <Select
              showSearch
              optionFilterProp="children"
              onChange={onChangea}
              onSearch={onSearcha}
              className="allaricle_search"
            >
              <Option value="前端">前端</Option>
              <Option value="后端">后端</Option>
              <Option value="阅读">阅读</Option>
              <Option value="要闻">要闻</Option>
            </Select>
          </div>
          <div className="allaricle_button_container">
            <Button className="allaricle_button" type="primary" icon={<SearchOutlined />}>搜索</Button>
            <Button className="allaricle_button">重置</Button>
          </div>
        </div>
        <div className="allaricle_table_container">
          <div className="allaricle_table_header_container">
            <div></div>
            <div><Button className="allaricle_table_header_button_container"> + 新建</Button></div>
          </div>
          <Table columns={columns} dataSource={data} scroll={{ x: 1500, y: 300 }} />
          <Footer></Footer>
        </div>
      </div>
    </div>
  );
}
